<template>
  <div>
    <el-dialog
      title="设置所属部门"
      :visible.sync="dialogVisible"
      append-to-body
      @close="close()"
      top="1vh"
      width="70%">
      <el-row>
        <el-col :span="8">
          <el-tree ref='tree'
             :data="treeData"
             v-loading="loading"
             style="height: 400px; overflow: scroll"
             :props="defaultProps"
             :expand-on-click-node='false'
             @node-click="handleNodeClick"
             node-key="id"
             :highlight-current='true'
             :default-expand-all='true'>
                <span class="custom-tree-node" slot-scope="{ node, data }">
                  <span v-if="data.other.Status == 0" style="display: inline-block;width: 100%;">{{ data.name }}</span>
                  <span v-if="data.other.Status == 1" style="display: inline-block;width: 100%;color:red">{{ data.name }}(禁用)</span>
                  <div style="display: inline-block;" class="treeNone">
                  </div>
                 </span>
             </el-tree>
        </el-col>
        <el-col :span="8" style="margin-left:30px">
              选择所属部门：{{selectedOrgName}}
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="setOrg()" type="primary">设置</el-button>
        <el-button size="small" @click="close()" type="primary">关 闭</el-button>
      </span>
      </el-dialog>
  </div>
</template>

<script>
import {
  treeById
} from '@/api/systemManage/roleManagementRoleEdit'
export default {
  name: 'belongOrg',
  components: {},
  props: ['belongData'],
  data() {
    return {
      tableKey: 0,
      loading: false,
      dialogVisible: false,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      oldMenuIdArr: [],
      treeData: [],
      selectedOrgName: '',
      orgData: [],
    }
  },
  created() {
    this.getTreeData()
  },
  filters: {
    ptFilter(target) {
      return ptKeyValue[target]
    }
  },
  methods: {
    handleNodeClick(data) {
      const orgName = data.name
      this.selectedOrgName = data.name
      this.orgData.orgName = data.name
      this.orgData.orgId = data.id

    },
   setOrg() {
      this.$emit('setOrg', this.orgData)
      this.$emit('changeOrgCloseDialog')
   },
   close() {
      this.$emit('changeOrgCloseDialog')
   },
    getTreeData() {
      this.dialogVisible = true
      treeById({ id: this.$store.getters.orgId }).then(response => {
        this.treeData = response.data.data
        if (this.belongData) {
          this.$nextTick(() => {
            this.$refs.tree.setCurrentKey(this.belongData.belongOrgId) // treeBox 元素的ref   value 绑定的node-key
          })
          this.selectedOrgName = this.belongData.belongOrgName
         }
      })
    }
  }
}
</script>

<style scoped>
.treeArea {
    max-height: 66vh;
    overflow-y: auto;
}
</style>
